<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>表单验证</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<style type="text/css">
    body {
        font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif;
        margin: 0px;
        padding: 0px;
        font-size: 20px;
    }

    form {
        border: 1px solid #CCCCCC;
        background: #D4E1EE;
        width: 500px;
        margin: 20px auto;
        border-radius: 10px;
        padding: 20px;
    }

    input {
        margin-bottom: 10px;
    }

    label {
        font-size: 20px;
    }

    #username, #password {
        height: 25px;
        border-radius: 3px;
        line-height: 25px;
        font-size: 15px;
        margin-left: 10px;
        vertical-align: middle;
    }

    input:focus {
        outline: none;
    }

    span.message {
        color: red;
    }
</style>
<script type="text/javascript">
    $(function() {
        $('#submit').click(function(event) {
            var new_hobby = [];
            var username = $('#username').val();
            var password = $('#password').val();
            var hobby = $('input:checkbox:checked').val();
            var sex = $('input:radio:checked').val();
            var age = $('select :selected').val();

            $('#username+span').remove();
            $('#password+span').remove();

            if (username == '') {
                var span = $('<span class="message">用户名不能为空</span>');
                span.insertAfter('#username');
                event.preventDefault();
            }

            if (password == '') {
                var span = $('<span class="message">密码不能为空</span>');
                span.insertAfter('#password');
                event.preventDefault();
            }

            // console.log(hobby);
            alert('用户名: '+username+'\n'
                +'密码: '+password+'\n'
                +'爱好: '+hobby+'\n'
                +'性别: '+sex+'\n'
                +'年龄: '+age+'\n'
            );

        });

        $('#reset').click(function() {
            $('#username+span').remove();
            $('#password+span').remove();
        });
    });
</script>
</head>
<body>
<form action="" method="post">
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username" placeholder="请输入用户名">
    <br/>

    <label for="password">密码:</label>
    <input type="password" name="password" id="password" placeholder="请输入密码">
    <br/>

    爱好:
    <label>
        <input type="checkbox" name="hobby" value="check1">篮球
    </label>
    <label>
        <input type="checkbox" name="hobby" value="check2">看电视
    </label>
    <label>
        <input type="checkbox" name="hobby" value="check3">听音乐
    </label>
    <label>
        <input type="checkbox" name="hobby" value="check4">书法
    </label>
    <br/>

    性别:
    <label>
        <input type="radio" name="sex" value="nan" />男
    </label>
    <label>
        <input type="radio" name="sex" value="nv" />女
    </label>
    <br/>

    <label for="age">年龄:</label>
    <select id="age">
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
    </select>
    <br/>

    <input type="submit" id="submit" value="提交">
    <input type="reset" id="reset" value="重置">
</form>
</body>
</html>
